<script setup>
const softwareInfo = [
  {
    label: '软件名称',
    value: '砂级配检测系统'
  },
  {
    label: '版本号',
    value: 'v1.0.0'
  },
  {
    label: '发布日期',
    value: '2024-01-20'
  },
  {
    label: '运行环境',
    value: 'Windows 10/11'
  }
]

const teamInfo = [
  {
    label: '开发者',
    value: '张俊伟&张世豪&赵李鑫'
  },
  {
    label: '联系方式',
    value: 'example@email.com'
  },
  {
    label: '技术支持',
    value: '400-xxx-xxxx'
  }
]
</script>

<template>
  <div class="info-container">
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card class="info-card">
          <template #title>软件信息</template>
          <a-descriptions :data="softwareInfo" layout="vertical" />
        </a-card>
      </a-col>
      
      <a-col :span="12">
        <a-card class="info-card">
          <template #title>开发团队</template>
          <a-descriptions :data="teamInfo" layout="vertical" />
        </a-card>
      </a-col>
    </a-row>
    
    <a-card class="changelog-card">
      <template #title>更新日志</template>
      <a-timeline>
        <a-timeline-item>
          <span class="version">v1.0.0</span>
          <p>首次发布</p>
          <p class="time">2024-01-20</p>
        </a-timeline-item>
        <!-- 添加更多更新记录 -->
      </a-timeline>
    </a-card>
  </div>
</template>

<style scoped>
.info-container {
  height: 100%;
}

.info-card {
  margin-bottom: 16px;
}

.changelog-card {
  margin-top: 16px;
}

.version {
  font-weight: bold;
  margin-right: 8px;
}

.time {
  color: var(--color-text-3);
  font-size: 12px;
  margin-top: 4px;
}
</style>
